{include file="common/head"}
<style>
</style>
<div class="search-container layui-form layui-padding-4" lay-filter="search">
    <div class="layui-inline">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-read"></i>
            </div>
            <input type="text" name="good_name" id="good_name" value="" placeholder="商品名称" class="layui-input"
                lay-affix="clear">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-clear">
            <button style="float: right;" class="layui-btn layui-btn-sm layui-bg-blue" id="search">搜索</button>
        </div>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加商品</button>
    <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="delCheck">删除选中</button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
    <!-- <a class="layui-btn layui-btn-xs layui-bg-gray" lay-event="more">
      更多 
      <i class="layui-icon layui-icon-down"></i>
    </a> -->
  </div>
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{= d.id }}" title="显示|" lay-skin="switch" lay-filter="status" {{= d.status == 1 ? "checked" : "" }}>
  </script>
{include file="common/bottom"}
<script>
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var form = layui.form;
        var $ = layui.$
        $('#search').click(() => {
            let good_name = $('#good_name').val()
            if (good_name == '') {
                table.reload('test', { where: { type: '' } })
            } else {
                table.reload('test', {
                    where: {
                        good_name: good_name
                    },
                })
            }

        })
        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/admin/goods/list',
            toolbar: '#toolbarDemo',
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.count, // 解析数据长度
                    "data": res.data.data
                };
            },
            height: 'full',
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            cols: [[
                { type: 'checkbox' },
                { field: 'id', width: 80, title: 'ID', sort: true },
                { field: 'good_name', width: 130, title: '商品名称' },
                { field: 'description', title: '商品描述', width: 130 },
                { field: 'stock', title: '库存', width: 130 },
                {
                    field: 'category', title: '商品分类', width: 130, templet: function (d) {
                        return d.category.cname
                    }
                },
                { field: 'sort', width: 130, title: '排序', edit: 'sort' },
                {
                    field: 'status', title: '状态', width: 130, templet: $('#status')
                },
                {
                    field: 'type', title: '类型', width: 130, templet: function (d) {
                        if (d.type == 0) {
                            return `<span class="layui-badge-rim">普通内容</span>`
                        } else if (d.type == 1) {
                            return `<span class="layui-badge-rim">卡密发放</span>`
                        } else if (d.type == 2) {
                            return `<span class="layui-badge-rim">VIP时长</span>`
                        } else if (d.type == 3) {
                            return `<span class="layui-badge-rim">vip时长</span>`
                        }
                    }
                },
                {
                    field: 'content', width: 130, title: '商品内容', templet: function (d) {
                        if (d.content == 0) {
                            return '无'
                        }
                        return d.content
                    }
                },
                {
                    field: 'vip_time', width: 130, title: 'VIP时长', templet: function (d) {
                        if (d.vip_time == 0) {
                            return '无'
                        }
                        return d.vip_time
                    }
                },
                // 商品类型(提交成功后奖品发放形式0普通内容，1卡密发放，2参数提交（对应good_params表),3vip时长,用户组身份
                { field: 'create_time', title: '发布时间', width: 150 },
                { title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo' }
            ]],
            done: function () {
                var id = this.id;
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'all',
                        title: '展示全部'
                    }, {
                        id: 'top',
                        title: '置顶文章'
                    },],
                    // 菜单被点击的事件
                    click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'top':
                                table.reload('test', { where: { where: { is_top: 1 } } })
                                break
                        }
                    }
                })

            },
            error: function (res, msg) {
                console.log(res, msg)
            }


        });

        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'delCheck':
                    var data = checkStatus.data;
                    var delId = ''
                    data.forEach((el) => {
                        delId += el.id + ','
                    })
                    layer.confirm('确定要删除选中的商品吗？', {
                        btn: ['确定', '取消'],
                    }, function () {
                        layer.msg('操作成功', { icon: 6 })
                        table.reload('test')
                        $.post('/admin/goods/del', { id: delId }, (res) => {
                            layer.msg('操作成功', { icon: 6 })
                            table.reload('test')
                        })

                    })
                    break
                case 'add':
                    layer.open({
                        title: '添加商品'
                        , area: ['80%', '80%']
                        , type: 2
                        , shadeClose: true
                        , maxmin: true
                        , anim: 0
                        , closeBtn: 1
                        , content: '/admin/goods/add'
                    })
                    break
            };
        });


        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    area: ['80%', '80%'],
                    title: '编辑商品',
                    resize: true,
                    shadeClose: true,
                    closeBtn: 1,
                    content: '/admin/goods/update/id/' + data.id
                })
            } else if (obj.event == 'del') {
                layer.confirm(`确定要删除商品【${data.good_name}】吗？`, {
                    btn: ['确定', '取消'],
                }, function () {
                    $.post('/admin/goods/del', { id: data.id }, (res) => {
                        if (res.code == 200) {
                            layer.msg('删除成功', { time: 500 })
                            obj.del()
                        } else {
                            layer.msg('删除失败', { time: 500 })
                        }
                    })
                })
            }
        });
        // 复选框 批量删除
        table.on('checkbox(test)', function (obj) {
        });
        // 行单击事件
        table.on('row(test)', function (obj) {
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
        });
        form.on('switch(status)', function (obj) {
            var id = this.value;
            var name = this.name;
            var status = obj.elem.checked ? 1 : 0
            $.post('/admin/goods/doUpdate', { id: id, status: status }, (res) => {
                if (res.code == 200) {
                    layer.msg('操作成功', { time: 500 })
                } else {
                    layer.msg('操作失败', { time: 500 })
                }
            })
        });
        // 单元格编辑事件
        table.on('edit(test)', function (obj) {
            var field = obj.field; // 得到字段
            var value = obj.value; // 得到修改后的值
            var data = obj.data; // 得到所在行所有键值
            // 值的校验
            if (field == 'sort') {
                var regPos = /^[0-9]+.?[0-9]*/
                if (!regPos.test(obj.value)) {
                    layer.tips('输入的排序格式应为数字', this, { tips: 1 });
                    return obj.reedit();
                } else {
                    $.ajax({
                        url: '/admin/goods/doUpdate'
                        , type: 'post'
                        , data: {
                            id: data.id
                            , sort: obj.value
                        }
                        , dataType: 'json'
                        , success: (res) => {
                            if (res.code == 200) {
                                layer.msg('修改成功', { time: 500 })
                            } else {
                                layer.msg('修改失败', { time: 500 })
                            }
                        }
                    })

                }
            }

            layer.msg('编辑成功', { icon: 1 });

            // 其他更新操作
            var update = {};
            update[field] = value;
            obj.update(update);
        });
    });
</script>
</body>

</html>